<template>
	<view class="delivery">
		<view class="search">
			<uni-easyinput prefixIcon="search" class="search-input" :clearable="true" v-model="keyword" placeholder="请输入配载单号" @iconClick="iconClick">
			</uni-easyinput>
			<view class="search-btn">筛选</view>
		</view>
		<view class="nav-bar">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view class="nav-item">
					<view id="demo1" class="scroll-view-item current">全部</view>
					<view id="demo2" class="scroll-view-item">待接单</view>
					<view id="demo3" class="scroll-view-item">进行中</view>
					<view id="demo2" class="scroll-view-item">已取消</view>
					<view id="demo3" class="scroll-view-item">已完成</view>
				</view>
				
			</scroll-view>
			<view class="order-Info" v-for="(item, index ) in list" :key="item.id"
			 @tap="goDetail">
				<view class="order-top">
					<view class="left">
						<image class="icon-status" src="../../static/dzf.png" mode=""></image>
						<text>{{ formatStatus(item.status) }}</text>
					</view>
					<view class="right" v-if="item.status == '1'">
						<button type="danger">确认接单</button>
					</view>
				</view>
				<view class="bottom">
					<view class="common-line">
						<text class="order-no">配载单号：{{ item.orderNo }}</text>
						<text class="txt">{{ item.date }}</text>	
					</view>
					<view class="common-line">
						<view class="adress-txt">{{ item.fhd }}</view>
						<view class="hc">
							<view class="bar"></view>
							<image class="icon-hc" src="../../static/hc.png" mode=""></image>
							<view class="bar"></view>
						</view>	
						<view class="adress-txt">{{ item.shd }}</view>
					</view>
					<view class="common-line">
						<text  class="txt">{{ item.itemName }}</text>
						<text  class="txt" v-if="item.tjd">{{ item.tjd }}</text>	
					</view>
				</view>	
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const formatStatus = (status)=> {
		const obj = {
			1: '待接单',
			2: '进行中',
			3: '已取消',
			4: '已完成'
		};
		return obj[status];
	}
	const keyword = ref('');
	const list = ref([{
		id: 1,
		status: '2',
		orderNo: 'S2304235',
		date: '2022-03-21 12:32:21',
		fhd: '深圳市·宝安区',
		shd: '城市名·区',
		itemName: '10件（9P1C）|101箱|200kg|10cbm',
		tjd: '杭州'
	}]);
	const iconClick = ()=> {
		
	}
	const upper = ()=> {};
	const lower = ()=> {};
	const scroll = ()=> {};
	const goDetail =()=> {
		
	}
	const scrollTop = '';
</script>

<style scoped lang="scss">
	.delivery {
		width: 100%;
		border-top: 1px solid #e8e8e8!important;
		box-sizing: border-box;
	}
	.search {
		width: 100%;
		padding: 32rpx;
		background-color: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		.search-input {
			flex: 1;
			height: 72rpx;
		}
		.search-btn {
			width: 100rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.scroll-Y {
		.nav-item {
			display: flex;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			>view {
				width: 100px;
				&.current {
					color: #4562FE;
				}
			}
		}
	}
	.order-Info {
		
		padding: 32rpx;
		box-sizing: border-box;
		.order-top {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #e8e8e8;
			align-items: center;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			.left {
				display: flex;
				align-items: center;
				
			}
			.icon-status {
				width: 58rpx;
				height: 50rpx;
			}
			.right button {
				width: 188rpx;
				height: 58rpx;
				background-color: rgba(255, 0, 0, 1);
				line-height: 58rpx;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
			}
		}
		.common-line {
			
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			.order-no {
				font-size: 28rpx;
				color: #333;
			}
			.txt {
				font-size: 24rpx;
				color: #999;
			}
			.hc {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 40rpx;
				margin-top: 40rpx;
			}
			.adress-txt {
				font-size: 32rpx!important;
			}
			.icon-hc {
				width: 68rpx;
				height: 58rpx;
			}
			.bar {
				width: 30rpx;
				height: 2rpx;
				background-color: #e8e8e8;
				
			}
		}
	}
</style>